<template>
  <div class="activity-list">
    <h3 class="text-lg font-semibold mb-4">近期活动</h3>
    <ul class="space-y-3">
      <li 
        v-for="activity in activities" 
        :key="activity.id"
        class="flex items-start p-3  rounded-lg transition"
      >
        <el-avatar :size="40" :src="activity.avatar" class="mr-3" />
        <div>
          <p class="font-medium text-gray-600">{{ activity.user }}</p>
          <p class="text-sm text-gray-500">{{ activity.action }}</p>
          <p class="text-xs text-gray-400 mt-1">{{ formatTime(activity.time) }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { format } from 'date-fns'

interface Activity {
  id: number
  user: string
  avatar: string
  action: string
  time: Date
}

// 模拟数据（实际项目中可能通过 API 获取）
const activities = ref<Activity[]>([
  {
    id: 1,
    user: '张三',
    avatar: 'https://example.com/avatar1.jpg',
    action: '更新了项目报告',
    time: new Date('2023-06-15 09:30')
  },
  {
    id: 2,
    user: '李四',
    avatar: 'https://example.com/avatar2.jpg',
    action: '提交了新的任务',
    time: new Date('2023-06-14 14:15')
  }
])

const formatTime = (date: Date) => {
  return format(date, 'MM/dd HH:mm')
}
</script>

<style scoped>
.activity-list {
  @apply border rounded-lg p-4 bg-white;
}
</style>